<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>产品列表</title>
		<link rel="stylesheet" href="asset/css/conmom.css" />
		<link rel="stylesheet" href="asset/css/productList.css" />
		<link rel="stylesheet" href="public/css/footer.css" />
	</head>
	<body>
		<div class="detaproductList productList">
			<div class="title"><i class="iconfont back icon-xiangzuo2" onclick="window.history.go(-1)"></i>产品列表</div>
			<!--搜索栏[-->
			<div class="product-content">
				<form class="search">
		          <div class="formDiv">
		              <input placeholder="请输入搜索内容......" class="searchInput" id="keyword" value="">
		              <a class="searchBtn" id="photoBtn"><i class="icon iconfont icon-comiisxiangji"></i></a>
		          </div>
		        </form>
		    </div>
	        <!--搜索栏]-->
	        <div class="wall_nav_box">
	        	<a class="item active"><span class="in_border">热门</span></a>
	        	<a class="item"><span class="in_border">推荐</span></a>
	        	<a class="item"><span class="in_border">价格</span></a>
	        	<a class="item"><span class="in_border weui_navbar_item">筛选</span></a>
	        </div>
	        <!--商品列表[-->
	        <div class="contenr">
	        	<div class="clearfix">
	        		<div class="twoProduct">
						<div class="oneProduct">
							<div><span>新品</span></div>
							<a class="productA" >
								<div class="backImage">
									<img src="asset/img/5.png" />
								</div>
								<div class="product-msg">
									<div class="product-name ellipsis-product-name">美式风格 A5077-6+3+1 D吊灯</div>
									<div class="product-value clearfix">
										<div class="fl">￥12123</div>
										<div class="toCartBtn fr"><button><i class="icon iconfont icon-gouwuche" style="font-size: .6rem;"></i></button></div>
									</div>
								</div>
							</a>
						</div>
						<div class="oneProduct">
							<a class="productA" >
								<div class="backImage">
									<img src="asset/img/5.png" />
								</div>
								<div class="product-msg">
									<div class="product-name ellipsis-product-name">美式风格 A5077-6+3+1 D吊灯</div>
									<div class="product-value clearfix">
										<div class="fl">￥12123</div>
										<div class="toCartBtn fr">
											<button>
												<i class="icon iconfont icon-gouwuche" style="font-size: .6rem;"></i>
											</button>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="oneProduct">
							<div><span>活动</span></div>
							<a class="productA" >
								<div class="backImage">
									<img src="asset/img/5.png" />
								</div>
								<div class="product-msg">
									<div class="product-name ellipsis-product-name">美式风格 A5077-6+3+1 D吊灯</div>
									<div class="product-value clearfix">
										<div class="fl">￥12123</div>
										<div class="toCartBtn fr" ><button><i class="icon iconfont icon-gouwuche" style="font-size: .6rem;"></i></button></div>
									</div>
								</div>
							</a>
						</div>
						<div class="oneProduct">
							<a class="productA" >
								<div class="backImage">
									<img src="asset/img/5.png" />
								</div>
								<div class="product-msg">
									<div class="product-name ellipsis-product-name">美式风格 A5077-6+3+1 D吊灯</div>
									<div class="product-value clearfix">
										<div class="fl">￥12123</div>
										<div class="toCartBtn fr" ><button><i class="icon iconfont icon-gouwuche" style="font-size: .6rem;"></i></button></div>
									</div>
								</div>
							</a>
						</div>
						<div class="oneProduct">
							<a class="productA" >
								<div class="backImage">
									<img src="asset/img/5.png" />
								</div>
								<div class="product-msg">
									<div class="product-name ellipsis-product-name">美式风格 A5077-6+3+1 D吊灯</div>
									<div class="product-value clearfix">
										<div class="fl">￥12123</div>
										<div class="toCartBtn fr" ><button><i class="icon iconfont icon-gouwuche" style="font-size: .6rem;"></i></button></div>
									</div>
								</div>
							</a>
						</div>
					</div>
	        	</div>
	        </div>
	         <!--商品列表]-->
		</div>
<!--筛选[-->
	<div class="screen">
		<div class="screen-popup"></div>
		<div class="filterSearch">
	        <input type="text" placeholder="请输入关键字搜索" id="filterKeyword">
	        <button class="findProductBtn"><i class="icon iconfont"></i></button>
	    </div>
	    <div class="screen-div">
	    	<div class="filterProperty mainProperty" >
				<span>风格<i class="icon iconfont icon-xia" style="float: right;"></i></span>
				<div>
					<ul>
						<li>
							<a class="active">现代简约</a>
						</li>
						<li >
							<a>欧式奢华</a>
						</li>
						<li>
							<a>简约美式</a>
						</li>
						<li>
							<a>古典美式</a>
						</li>
						<li>
							<a>新中式</a>
						</li>
						<li>
							<a>古典中式</a>
						</li>
						<li>
							<a>后现代风格</a>
						</li>
						<li>
							<a>儿童灯/老人/礼品</a>
						</li>
						<li>
							<a>田园风/花草灯</a>
						</li>
						<li>
							<a>地中海/蒂凡尼</a>
						</li>
						<li>
							<a>北欧/宜家风</a>
						</li>
						<li>
							<a>工业风/LOFT</a>
						</li>
						<li>
							<a>其他</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="filterProperty mainProperty">
				<span>类型<i class="icon iconfont icon-xia" style="float: right;"></i></span>
				<div>
					<ul>
						<li>
							<a class="active">现代简约</a>
						</li>
						<li >
							<a>欧式奢华</a>
						</li>
						<li>
							<a>简约美式</a>
						</li>
						<li>
							<a>古典美式</a>
						</li>
						<li>
							<a>新中式</a>
						</li>
						<li>
							<a>古典中式</a>
						</li>
						<li>
							<a>后现代风格</a>
						</li>
						<li>
							<a>儿童灯/老人/礼品</a>
						</li>
						<li>
							<a>田园风/花草灯</a>
						</li>
						<li>
							<a>地中海/蒂凡尼</a>
						</li>
						<li>
							<a>北欧/宜家风</a>
						</li>
						<li>
							<a>工业风/LOFT</a>
						</li>
						<li>
							<a>其他</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="filterProperty mainProperty">
				<span>空间<i class="icon iconfont icon-xia fr"></i></span>
				<div>
					<ul>
						<li>
							<a class="active">现代简约</a>
						</li>
						<li >
							<a>欧式奢华</a>
						</li>
						<li>
							<a>简约美式</a>
						</li>
						<li>
							<a>古典美式</a>
						</li>
						<li>
							<a>新中式</a>
						</li>
						<li>
							<a>古典中式</a>
						</li>
						<li>
							<a>后现代风格</a>
						</li>
						<li>
							<a>儿童灯/老人/礼品</a>
						</li>
						<li>
							<a>田园风/花草灯</a>
						</li>
						<li>
							<a>地中海/蒂凡尼</a>
						</li>
						<li>
							<a>北欧/宜家风</a>
						</li>
						<li>
							<a>工业风/LOFT</a>
						</li>
						<li>
							<a>其他</a>
						</li>
					</ul>
				</div>
			</div>
			 <div class="filterFooter">
	    	<button class="cancelBtn">取消</button>
	    	<button class="sureBtn">确定</button>
	    </div>
	    </div>
	</div>
<!--筛选]-->
<!--底部[-->
	<footer class="clearfix text-center footer">
		  <div>
		  	<div class="bottom-area"> 
		  		<a class="bottom-nav-item active" href="">
		  			<i class="icon iconfont" style="font-size: .8rem;"></i>
		  			<p>主页</p>
		  		</a>
		  		<a class="bottom-nav-item" href="">
		  			<i class="icon iconfont icon-caidan" style="font-size: .8rem;"></i>
		  			<p>分类</p>
		  		</a>
		  		<a class="findeng">
				  	<div>
				  		<img style="width:75%;margin-left: 0.3rem;" src="asset/img/logo.png" width="100%">
				  	</div>
				 </a>
				 <!--  -->
				  <div class="component" style="display: none">
					<div class="cn-wrapper opened-nav" id="cn-wrapper">
						<ul>
							<li>
								<a><span class="icon iconfont icon-dianhua2"></span></a>
							</li>
							<li>
								<a><span class="icon iconfont icon-weixin1"></span></a>
							</li>
							<li>
								<a><span class="icon iconfont icon-qietu-"></span></a>
							</li>
							<li>
								<a><span class="icon iconfont icon-quanbu1"></span></a>
							</li>
							<li>
								<a><span class="icon iconfont icon-tuijian2"></span></a>
							</li>
						</ul>
					</div>
				</div>
		    	<a class="bottom-nav-item" href="" >
		    		<i class="icon iconfont" style="font-size: .8rem;"></i>
					<p>购物车</p>	
		    	</a>
		    	<a class="bottom-nav-item" href="" >
		    		<i class="icon iconfont" style="font-size: .8rem;"></i>
					<p>我的</p>	
		    	</a>
		  	</div>
		 </div>
	</footer>
	<!--底部]-->
	</body>
	<script type="text/javascript" src="public/jquery.min.js" ></script>
	<script type="text/javascript" src="asset/font/iconfont.js" ></script>
	<script>
	$(".wall_nav_box a").on("click",function(){
	    $(this).addClass("active").siblings().removeClass("active");
	});  
	/*筛选*/
	$(".weui_navbar_item").click(function(){
		$(".screen").show();
	});
	$(".cancelBtn").click(function(){
		$(".screen").hide();
	});
	$(".screen-div>.filterProperty>div>ul>li").click(function(){
		$(this).find("a").addClass("active");
	})
	</script>
</html>
